<template>
  <div class="roleSec">
    <!-- 检索方式 -->
    <sethead :arrTitle="arr">
      <template #search-btn>
        <div>
          <el-button type="primary" size="mini" class="btn" @click="search">搜索</el-button>
        </div>
      </template>
    </sethead>
    <!-- 创建 -->
    <div class="btnBox">
      <el-button type="primary" size="mini" class="search-btn" @click="handleClick">创建</el-button>
    </div>
    <!-- 表格内容 -->
    <div class="tableList">
      <el-table :data="listData" border style="width: 96%">
        <el-table-column prop="sortNum" label="序号" align="center" width="80"></el-table-column>
        <el-table-column prop="name" label="用户姓名" align="center" width="100"></el-table-column>
        <el-table-column prop="userAccount" label="用户账号" align="center" width="100"></el-table-column>
        <el-table-column prop="idCard" label="身份证号码" align="center" width="130">
          <template slot-scope="scope">
            {{scope.row.idCard.replace(/(\d{1})\d*([0-9a-zA-Z]{1})/,"$1****************$2")}}
          </template>
        </el-table-column>
        <el-table-column prop="telPhone" label="手机号码" width="110" align="center">
          <template slot-scope="scope">
            {{scope.row.telPhone.replace(/(\d{3})\d*([0-9]{3})/, "$1*****$2")}}
          </template>
        </el-table-column>
        <el-table-column prop="buseinerrArea" label="所属业务区" align="center" width="130"></el-table-column>
        <el-table-column prop="updateDate" label="更新时间" align="center" width="170"></el-table-column>
        <el-table-column prop="updateAuthor" label="更新人" align="center" width="120"></el-table-column>
        <el-table-column label="操作" align="center" style="border-right: none">
          <template slot-scope="scope">
            <el-button type="text" size="small">{{ operator1 }}</el-button>
            <span class="sline">|</span>
            <el-button @click="handleClick(scope.row)" type="text" size="small" class="stopUsing">{{ operator2 }}</el-button>
            <span class="sline">|</span>
            <el-button type="text" size="small">{{ operator3 }}</el-button>
            <el-button type="text" size="small">{{ operator4 }}</el-button>
            <slot name="operator"></slot>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <paginstion class="account-pages" :pageSize="pageSize" :curPage="curPage" :total="total"></paginstion>
    <!-- 创建账号列表 -->
    <mydialog :operator="createUser" :userInfo="userInfo" ref="dialog">
      <template #newsRemind>
        <el-form-item label="发送账号开通短信" :label-width="formLabelWidth" prop="newsRemotic" class="newsRemind">
          <el-switch el-switch v-model="value" active-color="#4da1ff" inactive-color="#F56C6C"  ></el-switch>
        </el-form-item>
      </template>
    </mydialog>
  </div>
</template>

<script>
import sethead from "../setTingHead"; //导入设置模块的搜索头部
import paginstion from "../pagination";
import mydialog from "../mydialog"; //导入弹框
export default {
  components: {
    sethead,
    paginstion,
    mydialog,
  },
  data() {
    return {
      operator1: "发送开通短信",
      operator2: "编辑",
      operator3: "停用",
      operator4: "启用",
      pageSize: 5, //每个页面显示5条数据
      curPage: 1, //当前页面
      total: 100, //总共的数
      createUser: "创建账号", //控制表格dialog弹开
      listData: [],
      searchData: [],
      formLabelWidth: "150px",
      value: true,
      // 检索方法
      arr: [
        { title: "用户账号", val: "" },
        { title: "用户姓名", val: "" },
        { title: "更新时间", hasDate: true, val: "" },
        { title: "更新人", val: "" },
        { title: "手机号码", val: "" },
        { title: "所属业务区", val: "" },
      ],
      userInfo: [
        { title: "用户姓名" },
        { title: "用户账号" },
        { title: "身份证号码" },
        { title: "手机号码" },
        { title: "选择角色" },
      ],
    };
  },
  mounted() {
    //页面加载的时候请求那个store里面的数据
    this.listData = this.$store.state.roleAccountTableData;
    // 总数据条数
    this.total = this.$store.state.roleAccountTableData.length;
  },
  methods: {
    handleClick(option) {
      //显示弹框
      this.$refs["dialog"].dialogFormVisible = true;
      //点击谁就把传递过来的参数赋值
      this.$refs["dialog"].ruleForm = option
    },
    search() {
      this.searchData = []; //搜索的时候先清空
      this.listData.map((element) => {
        // // 判断是否含有用户姓名
        // let flag1 =element.userAccount.includes(this.arr[0].val) && this.arr[0].val !== "";
        // // 判断是否含有用户账号
        // let flag2 =element.name.includes(this.arr[1].val) &&this.arr[1].val !== "";
        // // 判断是否含有更新作者
        // let flag3 =element.updateAuthor.includes(this.arr[3].val) &&this.arr[3].val !== "";
        // //判断所属的业务区
        // let flag4 =element.buseinerrArea.includes(this.arr[5].val) &&this.arr[5].val !== "";
        // // 判断是否含有更新时间
        // let flag5 =element.updateDate.includes(this.arr[2].val) &&this.arr[2].val !== "";
        let property = "";
        for (let i in this.arr) {
          switch (i) {
            case "0":
              property = "userAccount";
              break;
            case "1":
              property = "name";
              break;
            case "2":
              property = "updateDate";
              break;
            case "3":
              property = "updateAuthor";
              break;
            case "5":
              property = "buseinerrArea";
              break;
          }
          //为真才push进去
          if (
            this.arr[i].val !== "" &&
            element[property].includes(this.arr[i].val)
          ) {
            this.searchData.push(element);
          }
        }
        return (this.listData = this.searchData); //返回数据
      });
    },
  },
};
</script>

<style lang="less" scoped>
.roleSec {
  height: 100%;
  background-color: #fff;
  .btnBox {
    .search-btn {
      float: right;
      margin: 20px 62px 20px 0;
    }
  }
}
.btn {
  position: absolute;
  right: 26px;
  top: 10px;
}
/deep/.account-pages {
  float: left;
  margin: 20px 0 0 30px;
}
/deep/tbody {
  font-size: 12px;
}
/deep/.el-table--border {
  margin: 0 auto;
}
.sline {
  color: #eef0f3;
  padding: 0 5px;
}
</style>